
<script>
import Msgtpl from "./msgtpl";
import _ from "lodash";
// import { getStomp } from "@/utils/websocket";
export default {
  components: { Msgtpl },
  data() {
    return {
      isScrollBottom: false, // 是否滚动到底部
      noReadNum: 0 // 当前系统未读信息条数
    };
  },
  methods: {
    noticeMsg() {
      let el = this.$refs.msgbox;
      el.scrollTop = el.scrollHeight - el.clientHeight;
    },
    handleScroll(e) {
      let scrollTop = e.target.scrollTop;
      let windowHeight = e.target.clientHeight;
      let scrollHeight = e.target.scrollHeight;
      this.isScrollBottom = false;
      //滚动条到底部的条件
      if (scrollTop + windowHeight >= scrollHeight - 10) {
        this.isScrollBottom = true;
      }
      // 监听每条消息的滚动显示，标记已读未读
      let msgLis = this.$refs["msg_li"];
      msgLis.map(li => {
        let _status = li.getAttribute("status");
        if (_status == "1") {
          this.scrollMsg(li, scrollTop);
        }
      });
    },
    scrollMsg(e, sTop) {
      let scrollTop = e.offsetTop;
      let scrollHeight = e.scrollHeight;
      let _dd = scrollTop + scrollHeight - sTop - window.innerHeight;
      if (_dd <= 0) {
        // ws发送已读消息
        let _id = e.getAttribute("data");
        this.$store.commit("MSG_READ", {
          id: _id,
          sessionId: this.currentId
        });
        // getStomp().send(
        //   "/app/receive/readed",
        //   {},
        //   JSON.stringify({
        //     msgIds: [_id],
        //     source: this.currentId,
        //     userId: this.$store.state.useInfo.userId,
        //     tenantId: this.$store.state.useInfo.tenantId
        //   })
        // );
      }
    }
  },
  computed: {
    session() {
      let { sessions, currentSessionId } = this.$store.state.messageCenter;
      let result = sessions.find(
        session => session.source === currentSessionId
      );
      if (result && result["messageList"]) {
        this.noReadNum =
          result["messageList"].filter(item => item.status == 1).length || 0;
      }
      let el = this.$refs.msgbox;
      if (el) {
        el.addEventListener(
          "scroll",
          _.throttle(this.handleScroll, 500),
          false
        );
      }
      return result;
    },
    currentId() {
      return this.$store.state.messageCenter.currentSessionId;
    }
  },
  watch: {
    session() {
      setTimeout(() => {
        // 初始进入时,可见消息标记已读未读
        let msgLis = this.$refs["msg_li"];
        let el = this.$refs.msgbox;
        if (el && msgLis) {
          msgLis.map(li => {
            let _status = li.getAttribute("status");
            if (_status == "1") {
              this.scrollMsg(li, el.scrollTop);
            }
          });
        }
      }, 100);
    }
  }
};
</script>
<template>
  <div>
    <header v-if="session">
      <img
        width="30"
        height="30"
        :alt="session['sourceName']"
        :src="session['icon']"
        :style="`background:${session['bgColor']}`"
      >
      <p>{{session['sourceName']}}</p>
    </header>
    <div class="message" ref="msgbox">
      <ul v-if="session">
        <li
          v-for="item in session.messageList"
          :key="item.msgId"
          :data="item.msgId"
          :status="item.status"
          :ref="`msg_li`"
        >
          <p class="time">
            <span>{{ item.createTime }}</span>
          </p>
          <div class="main">
            <img
              class="avatar"
              width="32"
              height="32"
              :style="`background:${session['bgColor']}`"
              :src="session.icon"
            >
            <!-- 模板配置 start  文本消息、表单、图文消息、报表 -->
            <msgtpl :msg="item"></msgtpl>
            <!-- 模板配置 end-->
          </div>
        </li>
      </ul>
      <div v-if="!session||(session.messageList&&session.messageList.length===0)" class="no-msg">
        <img style="width: 60%;" src="../../assets/no-msg.png" alt="暂无消息">
        <p>暂无消息</p>
      </div>
    </div>
    <div class="msg-notice" v-if="noReadNum>0" @click="noticeMsg()">
      <a-icon type="double-right"/>
      {{noReadNum}} 条新消息
    </div>
  </div>
</template>

<style lang="less" scoped>
header {
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  border-bottom: 1px solit #ccc;
  padding: 0 10px;
  display: flex;
  img {
    margin: 8px;
    padding: 4px;
    border-radius: 4px;
  }
  & > p {
    font-weight: 500;
    color: #333;
    font-size: 16px;
  }
}
.message {
  padding: 10px 30px;
  overflow-y: scroll;
  height: ~"calc(100vh - 60px)";

  li {
    margin-bottom: 15px;
  }
  .time {
    margin: 7px 0;
    text-align: center;

    > span {
      display: inline-block;
      font-size: 12px;
      color: #bcbfcb;
    }
  }
  .avatar {
    float: left;
    margin: 0 10px 0 0;
    border-radius: 4px;
    padding: 6px;
  }

  .no-msg {
    text-align: center;
    padding-top: 5%;
    color: #999999;
    font-size: 16px;
  }
}
.msg-notice {
  color: #647bfc;
  line-height: 17px;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  right: 200px;
  bottom: 40px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
  & > i {
    transform: rotate(90deg);
    margin-right: 10px;
    font-size: 14px;
  }
}
</style>